import { Checkbox, Form, Input, InputNumber, Select, Tabs } from "antd";
// import { format } from "_@types_prettier@2.4.1@@types/prettier";
import styles from './index.less';
import _ from 'lodash';

interface ICNumber {
  formData: {
    isNumberFormat: boolean;
    numberFormat: string;
    showThousandth: boolean;
    decimal: number;
  }
}

const formatNumber = (num: string) => {
  if (num.indexOf('.') !== -1) {
    const num_array = num.split(".");//如果是小数就根据"."拆分成两个数组，整数部分和小数部分，对整数部分进行千分位处理，再合并小数部分
    const num_before = num_array[0].replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
    return num_before + "." + num_array[1];
  } else {
    return num.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
  }
}

const CNumber: React.FC<ICNumber> = ({ formData }) => {
  const formatData = () => {
    const length = 99999;
    let formatStr = '99999';
    if (formData.isNumberFormat) {
      formatStr = length.toFixed(formData.decimal)
    }
    if (formData.showThousandth) {
      formatStr = formatNumber(formatStr)
    }
    return (
      <div>
        {formatStr}
      </div>
    )
  }
  return (
    <>
      <Form.Item className={styles.noMargin} name='numberFormat' label='格式'>
        <Select options={[
          {
            label: '数值',
            value: 'number',
          },
          {
            label: '百分比',
            value: 'percentage',
          }
        ]} />
      </Form.Item>
      <Input.Group compact>
        <Form.Item className={styles.noMargin} name='isNumberFormat' valuePropName="checked">
          <Checkbox>保留小数位数</Checkbox>
        </Form.Item>
        {formData.isNumberFormat && <Form.Item className={styles.noMargin} name='decimal' >
          <InputNumber size='small' min={0} max={6} />
        </Form.Item>}
      </Input.Group>
      {formData.numberFormat === 'number' && <Form.Item noStyle name='showThousandth' valuePropName="checked">
        <Checkbox>显示千分位</Checkbox>
      </Form.Item>}
      {formData.isNumberFormat || formData.showThousandth ? <div className={styles.decimal}>
        {formatData()}
      </div> : ''}
    </>
  )
}

const CInput = () => {
  const [form] = Form.useForm();
  return (
    <Form
      form={form}
      layout="vertical"
      onValuesChange={(changeValue, values) => {
        const name = Object.keys(changeValue)[0];
        const value = changeValue[name];
        if (name === 'inputType' && value !== 'number') {
          form.setFieldsValue({ isRange: false })
        }
        if (name === 'numberFormat' && value !== 'number') {
          form.setFieldsValue({ showThousandth: '' })
        }
        if (name === 'inputType' && value === 'number') {
          form.setFieldsValue({ numberFormat: 'number' })
        }
        if (name === 'numberFormat') {
          form.setFieldsValue({ isNumberFormat: false, decimal: 0, showThousandth: false })
        }
        if (name === 'isRange') {
          form.setFieldsValue({ rangeStart: '', rangeEnd: '' })
        }
        console.log(values)
      }}
      initialValues={{
        inputType: 'text',
        strFormat: ''
      }}
    >
      {
        ({ inputType, isRange, isNumberFormat, numberFormat, showThousandth, decimal }) => (
          <>
            
            <Form.Item name='inputType' label='组件类型'>
              <Select options={[
                {
                  label: '单行文本',
                  value: 'text'
                }, {
                  label: '多行文本',
                  value: 'textarea'
                }, {
                  label: '数字',
                  value: 'number'
                },
              ]} />
            </Form.Item>
            <Form.Item label='校验'>
              <Form.Item noStyle name='required' valuePropName="checked">
                <Checkbox>必填</Checkbox>
              </Form.Item>
              <Form.Item className={styles.noMargin} hidden={inputType !== 'number'} name='isRange' valuePropName="checked" label=''>
                <Checkbox>限定范围</Checkbox>
              </Form.Item>
              <Form.Item hidden={!isRange} noStyle >
                <Input.Group compact>
                  <Form.Item name='rangeStart' >
                    <InputNumber style={{ width: 100, textAlign: 'center' }} placeholder="不限" />
                  </Form.Item >
                  <Input
                    className="site-input-split"
                    style={{
                      width: 30,
                      borderLeft: 0,
                      borderRight: 0,
                      pointerEvents: 'none',
                    }}
                    placeholder="~"
                    disabled
                  />
                  <Form.Item name='rangeEnd' >
                    <InputNumber
                      className="site-input-right"
                      style={{
                        width: 100,
                        textAlign: 'center',
                      }}
                      placeholder="不限"
                    />
                  </Form.Item>
                </Input.Group>
              </Form.Item>
            </Form.Item>
            {inputType === 'text' && <Form.Item className={styles.noMargin} name='strFormat' label='格式'>
              <Select options={[
                {
                  label: '无',
                  value: '',
                },
                {
                  label: '手机号',
                  value: 'phone',
                },
                {
                  label: '电话号',
                  value: 'mobeil',
                },
                {
                  label: '身份证号',
                  value: 'IDcard',
                },
                {
                  label: '邮箱',
                  value: 'email',
                }
              ]} />
            </Form.Item>}
            {inputType === 'number' && <CNumber formData={{ isNumberFormat, numberFormat, showThousandth, decimal }} />}
          </>
        )
      }

    </Form >
  )
}

export default CInput;

{/* <Form.Item name='defaultValue' label='默认值'>
        <Select options={[
          {
            label: '自定义',
            value: 'custom'
          },
          {
            label: '数据联动',
            value: 'dataSouce'
          },
          {
            label: '自定义',
            value: 'formula'
          }
        ]}/>
      </Form.Item> */}
{/* <Form.Item name='label' label='标题'>
        <Input />
      </Form.Item> */}
{/* <Form.Item name='name' label='name' required>
        <Input />
      </Form.Item> */}
{/* <Form.Item name='placeholder' label='占位符'>
        <Input />
      </Form.Item> */}
{/* <Form.Item name='desc' label='描述信息'>
        <Input.TextArea />
      </Form.Item> */}
